<template>
 <div class="recommend">
   <scroll class="scroll" ref="scroll">
    <div class="scroll-content">
      <slide class="slide" :autoplay="true">
        <div v-for="item in banner" :key="item.id">
          <a :href = "item.link">
            <img :src = "item.pic">
          </a>
        </div>
      </slide>
      <h1>热门推荐</h1>
      <list :avatar="true" :data="disc" type="disc" @selectdisc="selectDisc"></list>
    </div>
    <div class="loading" v-if="!disc.length">
      <loading></loading>
    </div>
   </scroll>
   <!-- component render -->
   <router-view></router-view>
 </div>
</template>

<script>
    import Slide from "@/base/slide/Slide"
    import Scroll from "@/base/scroll/Scroll"
    import List from "@/base/list/List"
    import Loading from "@/base/loading/Loading";
    import {getBanner, getDisc} from "@/api/recommend";
    export default {
        name: "Recommend",
        components: {Slide,Scroll,List,Loading},
        data(){
            return {
                banner: [],
                disc: []
            }
        },
        methods: {
            async _getBanner() {
                this.banner = await getBanner()
            },
            async _getDisc() {
                this.disc = await getDisc()
            },
            selectDisc(disc) {
                this.$router.push({
                    name: 'disc',
                    params: disc
                })
            }
        },
        mounted(){
            this._getBanner()
            this._getDisc()
        }
    }
</script>

<style scoped lang="stylus">
 @import "~common/stylus/variable"

 .recommend
  height 100%
  .scroll
    position relative
    height 100%
    .scroll-content
      .slide
        a
          display block
          img
            width 100%
            vertical-align top

      h1
        height 44px
        line-height 44px
        text-align center
        color $color-theme
        font-size $font-size-medium-x
    .loading
      position absolute
      top 50%
      transform translateY(-50%)
      left 0
      right 0
</style>
